<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/font.css">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>

    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>

    <link rel="stylesheet" href="/static/sweetalert/sweetalert.css">
    <script src="/static/sweetalert/ions_alert.js"></script>
    <script src="/static/sweetalert/sweetalert.min.js"></script>


    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href=" /static/froala_editor/css/froala_editor.css">
    <link rel="stylesheet" href="/static/froala_editor/css/froala_style.css">
    <link rel="stylesheet" href="/static/froala_editor/css/plugins/code_view.css">
    <link rel="stylesheet" href="/static/froala_editor/css/plugins/image_manager.css">
    <link rel="stylesheet" href="/static/froala_editor/css/plugins/image.css">
    <link rel="stylesheet" href="/static/froala_editor/css/plugins/table.css">
    <link rel="stylesheet" href="/static/froala_editor/css/plugins/video.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css">


    <style>
        body {
            text-align: center;
        }

        div#editor {
            width: 81%;
            margin: auto;
            text-align: left;
        }
    </style>
</head>

<body>

<div class="x-body" id="editor">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="L_email" class="layui-form-label">
                <span class="x-red">*</span>新闻标题
            </label>
            <div class="layui-input-inline">
                <input type="text" id="title" name="title"  lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_username" class="layui-form-label">
                <span class="x-red">*</span>新闻内容
            </label>
            <div class="layui-input-inline">
                <textarea id='edit' style="margin-top: 30px;" placeholder="Type some text">
                    <h1>Textarea</h1>
                    <p>The editor can also be initialized on a textarea.</p>
                  </textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="L_pass" class="layui-form-label">
                <span class="x-red">*</span>栏目
            </label>
            <div class="layui-input-inline">
                <input type="text" id="cate_name" name="cate_name" ay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>

        </div>


        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
                <span class="x-red">*</span>是否启用
            </label>
            <div class="layui-input-inline">
                <input type="radio" name="is_active" autocomplete="off" class="layui-input" value="1" title="启用" checked>

                <input type="radio" name="is_active" required="" lay-verify="repass"
                       autocomplete="off" class="layui-input" value="0" title="停用">
            </div>
        </div>


        <div class="layui-form-item">
            <label for="L_repass" class="layui-form-label">
            </label>
            <button  class="layui-btn" type="submit">
                提交
            </button>
        </div>
    </form>
</div>


<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/froala_editor.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/align.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/code_beautifier.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/code_view.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/draggable.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/image.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/image_manager.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/link.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/lists.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/paragraph_format.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/paragraph_style.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/table.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/video.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/url.min.js"></script>
<script type="text/javascript" src="/static/froala_editor/js/plugins/entities.min.js"></script>

<script>
    (function () {
        const editorInstance = new FroalaEditor('#edit', {
            enter: FroalaEditor.ENTER_P,
            placeholderText: null,
            events: {
                initialized: function () {
                    const editor = this
                    this.el.closest('form').addEventListener('submit', function (e) {
                        console.log(editor.$oel.val())
                        e.preventDefault()
                    })
                }
            }
        })
    })()
</script>
</body>

</html>